<template>
  <div class="video-elem-item">
    <div ref="artRef" class="artplayer" :style="style"></div>
  </div>
</template>

<script setup lang="ts">
// import Artplayer from "artplayer"

const state = `<svg
  viewBox='0 0 80 80'
  xmlns='http://www.w3.org/2000/svg'
  xmlns:xlink='http://www.w3.org/1999/xlink'
>
  <defs>
    <path id='pid-64-svgo-a' d='M0 0h80v80H0z'></path>
    <path
      d='M52.546 8.014a3.998 3.998 0 014.222 3.077c.104.446.093.808.039 1.138a2.74 2.74 0 01-.312.881c-.073.132-.16.254-.246.376l-.257.366-.521.73c-.7.969-1.415 1.926-2.154 2.866l-.015.02a240.945 240.945 0 015.986.341l1.643.123.822.066.41.034.206.018.103.008.115.012c1.266.116 2.516.45 3.677.975a11.663 11.663 0 013.166 2.114c.931.87 1.719 1.895 2.321 3.022a11.595 11.595 0 011.224 3.613c.03.157.046.316.068.474l.015.119.013.112.022.206.085.822.159 1.646c.1 1.098.19 2.198.27 3.298.315 4.4.463 8.829.36 13.255a166.489 166.489 0 01-.843 13.213c-.012.127-.034.297-.053.454a7.589 7.589 0 01-.072.475l-.04.237-.05.236a11.762 11.762 0 01-.74 2.287 11.755 11.755 0 01-5.118 5.57 11.705 11.705 0 01-3.623 1.263c-.158.024-.316.052-.475.072l-.477.053-.821.071-1.644.134c-1.096.086-2.192.16-3.288.23a260.08 260.08 0 01-6.578.325c-8.772.324-17.546.22-26.313-.302a242.458 242.458 0 01-3.287-.22l-1.643-.129-.822-.069-.41-.035-.206-.018c-.068-.006-.133-.01-.218-.02a11.566 11.566 0 01-3.7-.992 11.732 11.732 0 01-5.497-5.178 11.73 11.73 0 01-1.215-3.627c-.024-.158-.051-.316-.067-.475l-.026-.238-.013-.119-.01-.103-.07-.823-.132-1.648a190.637 190.637 0 01-.22-3.298c-.256-4.399-.358-8.817-.258-13.233.099-4.412.372-8.811.788-13.197a11.65 11.65 0 013.039-6.835 11.585 11.585 0 016.572-3.563c.157-.023.312-.051.47-.07l.47-.05.82-.07 1.643-.13a228.493 228.493 0 016.647-.405l-.041-.05a88.145 88.145 0 01-2.154-2.867l-.52-.73-.258-.366c-.086-.122-.173-.244-.246-.376a2.74 2.74 0 01-.312-.881 2.808 2.808 0 01.04-1.138 3.998 3.998 0 014.22-3.077 2.8 2.8 0 011.093.313c.294.155.538.347.742.568.102.11.19.23.28.35l.27.359.532.72a88.059 88.059 0 012.06 2.936 73.036 73.036 0 011.929 3.03c.187.313.373.628.556.945 2.724-.047 5.447-.056 8.17-.038.748.006 1.496.015 2.244.026.18-.313.364-.624.549-.934a73.281 73.281 0 011.93-3.03 88.737 88.737 0 012.059-2.935l.533-.72.268-.359c.09-.12.179-.24.281-.35a2.8 2.8 0 011.834-.881zM30.13 34.631a4 4 0 00-.418 1.42 91.157 91.157 0 00-.446 9.128c0 2.828.121 5.656.364 8.483l.11 1.212a4 4 0 005.858 3.143c2.82-1.498 5.55-3.033 8.193-4.606a177.41 177.41 0 005.896-3.666l1.434-.942a4 4 0 00.047-6.632 137.703 137.703 0 00-7.377-4.708 146.88 146.88 0 00-6.879-3.849l-1.4-.725a4 4 0 00-5.382 1.742z'
      id='pid-64-svgo-d'
    ></path>
    <filter
      x='-15.4%'
      y='-16.3%'
      width='130.9%'
      height='132.5%'
      filterUnits='objectBoundingBox'
      id='pid-64-svgo-c'
    >
      <feOffset dy='2' in='SourceAlpha' result='shadowOffsetOuter1'></feOffset>
      <feGaussianBlur
        stdDeviation='1'
        in='shadowOffsetOuter1'
        result='shadowBlurOuter1'
      ></feGaussianBlur>
      <feColorMatrix
        values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0'
        in='shadowBlurOuter1'
        result='shadowMatrixOuter1'
      ></feColorMatrix>
      <feOffset in='SourceAlpha' result='shadowOffsetOuter2'></feOffset>
      <feGaussianBlur
        stdDeviation='3.5'
        in='shadowOffsetOuter2'
        result='shadowBlurOuter2'
      ></feGaussianBlur>
      <feColorMatrix
        values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'
        in='shadowBlurOuter2'
        result='shadowMatrixOuter2'
      ></feColorMatrix>
      <feMerge>
        <feMergeNode in='shadowMatrixOuter1'></feMergeNode>
        <feMergeNode in='shadowMatrixOuter2'></feMergeNode>
      </feMerge>
    </filter>
  </defs>
  <g fill='none' fill-rule='evenodd' opacity='.8'>
    <mask id='pid-64-svgo-b' fill='#fff'>
      <use xlink:href='#pid-64-svgo-a'></use>
    </mask>
    <g mask='url(#pid-64-svgo-b)'>
      <use fill='#000' filter='url(#pid-64-svgo-c)' xlink:href='#pid-64-svgo-d'></use>
      <use fill='#FFF' xlink:href='#pid-64-svgo-d'></use>
    </g>
  </g>
</svg>`

const indicator = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'>
    <path
      d='M16.118 3.667h.382a3.667 3.667 0 013.667 3.667v7.333a3.667 3.667 0 01-3.667 3.667h-11a3.667 3.667 0 01-3.667-3.667V7.333A3.667 3.667 0 015.5 3.666h.382L4.95 2.053a1.1 1.1 0 011.906-1.1l1.567 2.714h5.156L15.146.953a1.101 1.101 0 011.906 1.1l-.934 1.614z'
      fill='#333'
    ></path>
    <path
      d='M5.561 5.194h10.878a2.2 2.2 0 012.2 2.2v7.211a2.2 2.2 0 01-2.2 2.2H5.561a2.2 2.2 0 01-2.2-2.2V7.394a2.2 2.2 0 012.2-2.2z'
      fill='#fff'
    ></path>
    <path
      d='M6.967 8.556a1.1 1.1 0 011.1 1.1v2.689a1.1 1.1 0 11-2.2 0V9.656a1.1 1.1 0 011.1-1.1zM15.033 8.556a1.1 1.1 0 011.1 1.1v2.689a1.1 1.1 0 11-2.2 0V9.656a1.1 1.1 0 011.1-1.1z'
      fill='#333'
    ></path>
  </svg>`

const props = defineProps({
  message: {
    type: Object,
    default: () => ({}),
  },
  // snapshotUrl 视频封面图
  // videoSize 视频大小，单位：Byte
})

const artRef = ref(null)
const art = ref(null)
const loading = ref("")
const style = ref({})
const option = computed(() => ({
  url: props.message.payload?.videoUrl || "",
  contextmenu: [],
  container: artRef.value,
  lang: "zh-cn",
  theme: "#23ade5",
  fullscreen: true,
  icons: {
    state,
    loading: `<img width="50" heigth="50" src="${loading.value}">`,
    indicator,
  },
}))

const initArt = () => {
  // Artplayer.CONTEXTMENU = false
  // art.value = new Artplayer(option.value)
  // art.value.on("ready", () => {
  //   // art.value.mini = true
  // })
}

onMounted(() => {
  initArt()
})

onBeforeUnmount(() => {
  if (art.value && art.value.destroy) {
    art.value.destroy(false)
  }
})
</script>

<style lang="scss">
.video-elem-item {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}
.art-video-player {
  z-index: 1;
}
.artplayer {
  width: 240px;
  height: 135px;
}
.art-state {
  svg {
    width: 50px;
  }
}
.art-control-volume {
  display: none !important;
}
</style>
